<template>
  <div>
<el-upload
    action="#"
    list-type="picture-card"
    accept=".png,.jpg" 
    :http-request="uploadFile"
   
    :before-upload="beforeUpload"
   
    :before-remove="beforeRemove"
     multiple
    :limit="1"
    :on-exceed="onExceed"
    :file-list="fileList"
    :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="onPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>   
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="onDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>     
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="onRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

        
  </div>
</template>

<script>
export default {
    data() {
        return {            
            optionsValue: [],
            optionsCategory: [],
            query: {
                category_id: '',
                name: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {},
            idx: -1,
            id: -1,

            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            fileList:[]

        };
    },
methods:{
     //================图片上传  
        onPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        onDownload(file) {
        console.log("onDownload",file);
        },
        onRemove(file,fileList) {
            console.log("onRemove",file,fileList);
        },
        onSuccess(file,fileList) {
            console.log("onSuccess",file,fileList);
        }, 
        onError(file,fileList) {
            console.log("onError",file,fileList);
        },    
        onChange(file,fileList) {
            console.log("onChange",file,fileList);
        },                                 

        onExceed(file,fileList) {
            this.$message.warning("只能选择1个文件！");
        },

        beforeRemove(file,fileList) {
            console.log("beforeRemove:",file,fileList);
        },

        beforeUpload(file,fileList) {
            console.log("beforeUpload:",file,fileList);
        },     
}
}
</script>

<style>

</style>